<template>
  <div>
    <MainHead :refresh="false"
              :title="'指标审批详情'" />
    <el-card class="main-card"
             style="margin-top: 10px"
             shadow="never"
             v-loading="$store.state.loading">
      <div class="tabHader">
        <div class="tabHader-item">
          类 别
        </div>
        <div class="tabHader-item">
          一级指标
        </div>
        <div class="tabHader-item">
          二级指标
        </div>
        <!-- <div class="tabHader-item">
        三级指标
      </div> -->
        <div class="tabHader-item">
          分值
        </div>
      </div>
      <table class="table">
        <tbody>
          <template v-for="one in dataList">
            <template v-for="(two,b) in one.children">
              <template v-for="(three,c) in two.children">
                <tr :key='three.id'>
                  <template v-if="b==0">
                    <td class="tdOne"
                        :rowspan="getRowNum(one.children)">{{one.criteria.criteriaName}}</td>
                  </template>
                  <template v-if="c==0">
                    <td class="tdTow"
                        :rowspan="two.children.length">{{two.criteria.criteriaName}}</td>
                  </template>
                  <td class="tdThree">{{three.criteria.criteriaName}}</td>
                  <td class="tdFour">
                    <el-input v-model.number="three.score"
                              placeholder="分值"
                              @input='inputChange(three, $event)'
                              type='number'
                              :disabled="type === 3"></el-input>
                  </td>
                </tr>
              </template>
            </template>
          </template>
        </tbody>
      </table>
      <div class="footer-btn"
           style="margin-top: 10px;">
        <el-button style="color: #d03539; border-color: #d03539; padding: 12px 27px"
                   @click="$router.push(homePage)">取消</el-button>
        <el-button style="padding: 12px 27px"
                   type="primary"
                   @click="handleApproval(1)">通过</el-button>
        <el-button style="padding: 12px 27px"
                   type="primary"
                   @click="handleApproval(2)">不通过</el-button>
      </div>
    </el-card>
    <el-dialog :visible.sync="dialogFormVisible"
               :title="'审核'">
      <el-form :model="form">
        <el-form-item label="审批意见"
                      :label-width="120">
          <el-input v-model="form.approvalOpinion"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import store from '@/store'
export default {
  data () {
    return {
      dataList: [],
      homePage: '/rural_project_evaluation_approval',
      action: {
        getListThree: '/ruralProjectEvaluationApproval/listCriteriaScoreThree',
      },
      dialogFormVisible: false,
      form: {
        approvalOpinion: '',
        approvalState: null,
        id: ''
      }
    }
  },
  components: {

  },
  created () {
    this.type = this.$route.meta.type
    this.getListThree(localStorage.getItem('id'))
  },
  methods: {
    // 获取详情数据
    getListThree (id) {
      this.$Ajax(
        this.action.getListThree,
        "get",
        {
          approvalId: id,
          // statisticsYear: localStorage.getItem('statisticsYear')
        },
        (res) => {
          this.dataList = res.data
          // this.form.statisticsYear = (res.data[0] && res.data[0].statisticsYear && res.data[0].statisticsYear.toString()) || ''
        }
      );
    },
    getRowNum (towList) {
      let num = 0;
      for (let i in towList) {
        num += towList[i].children.length;
      }
      return num;
    },
    handleApproval (type) {
      this.form.approvalState = type
      this.form.id = localStorage.getItem('id')
      // this.form.statisticsYear = localStorage.getItem('statisticsYear')
      if (type === 1) {
        this.form.approvalOpinion = ''
        this.submit()
      }
      if (type === 2) {
        this.dialogFormVisible = true
      }
    },
    submit () {
      this.$Ajax(
        '/ruralProjectEvaluationApproval/approval',
        'post',
        this.form,
        (res) => {
          this.$message.success(res.message)
          this.$router.push(this.homePage)
        }
      )
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
.tabHader {
  display: flex;
  border: 1px solid #e7e7e7;
  text-align: center;
  background-color: #fafafa;
  margin-top: 15px;
  .tabHader-item:nth-child(1) {
    width: 10%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(2) {
    width: 16%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(3) {
    width: 64%;
    border-right: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tabHader-item:nth-child(4) {
    width: 10%;
    padding: 10px;
  }
}
.table {
  border-collapse: separate;
  border-spacing: 0px;
  .tdOne {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 10.75%;
  }
  .tdTow {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 16.56%;
  }
  .tdThree {
    border: 1px solid #e7e7e7;
    padding: 10px;
  }
  .tdFour {
    border: 1px solid #e7e7e7;
    padding: 10px;
    width: 10.68%;
  }
}
</style>
